@font-face {
    font-family: "consola";
    src: url('consola.ttf');
}

code,
pre {
    font-family: consola, system-ui;
    color: var(--code-font-color);
    font-size: 1em;
    text-align: left;
    word-spacing: normal;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre,
code,
pre span {
    vertical-align: top;
    cursor: text;
}

/* code block */
.code-container {
    position: relative;
    background-color: var(--code-back-color);
    overflow: hidden;
}

.code-container > code {
    display: block;
    font-style: normal;
    font-weight: normal;
    padding: 0.8em 2em 0.8em 3.5em;
    max-width: 100%;
    overflow-x: auto;
}

.code-container > .count {
    position: absolute;
    top: 0.8em;
    left: 0;
    font-style: normal;
    font-weight: normal;
    width: 3em;
    border-right: 1px solid var(--code-count-color);
    color: var(--code-count-color);
    background-color: var(--code-back-color);
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.code-container > .code-copy-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    width: 1.6em;
    height: 1.6em;
    cursor: pointer;
}

.code-container > .code-copy-button:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    content: '';
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23999%22%3E%3Cpath%20d%3D%22M670.037333%20283.818667H206.677333c-28.330667%200-51.2%2022.869333-51.2%2051.2V836.266667c0%2028.330667%2022.869333%2051.2%2051.2%2051.2h463.530667c28.330667%200%2051.2-22.869333%2051.2-51.2V335.018667a51.370667%2051.370667%200%200%200-51.370667-51.2z%20m-17.066666%20535.381333H223.744V352.085333h429.397333V819.2z%22%2F%3E%3Cpath%20d%3D%22M794.965333%20119.466667H342.186667c-18.773333%200-34.133333%2015.36-34.133334%2034.133333s15.36%2034.133333%2034.133334%2034.133333h452.778666c12.458667%200%2022.528%2010.069333%2022.528%2022.528v509.269334c0%2018.773333%2015.36%2034.133333%2034.133334%2034.133333s34.133333-15.36%2034.133333-34.133333V210.261333C885.589333%20160.085333%20844.970667%20119.466667%20794.965333%20119.466667z%22%2F%3E%3C%2Fsvg%3E");
}

.code-container > .code-copy-button:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d5d5d5%22%3E%3Cpath%20d%3D%22M670.037333%20283.818667H206.677333c-28.330667%200-51.2%2022.869333-51.2%2051.2V836.266667c0%2028.330667%2022.869333%2051.2%2051.2%2051.2h463.530667c28.330667%200%2051.2-22.869333%2051.2-51.2V335.018667a51.370667%2051.370667%200%200%200-51.370667-51.2z%20m-17.066666%20535.381333H223.744V352.085333h429.397333V819.2z%22%2F%3E%3Cpath%20d%3D%22M794.965333%20119.466667H342.186667c-18.773333%200-34.133333%2015.36-34.133334%2034.133333s15.36%2034.133333%2034.133334%2034.133333h452.778666c12.458667%200%2022.528%2010.069333%2022.528%2022.528v509.269334c0%2018.773333%2015.36%2034.133333%2034.133334%2034.133333s34.133333-15.36%2034.133333-34.133333V210.261333C885.589333%20160.085333%20844.970667%20119.466667%20794.965333%20119.466667z%22%2F%3E%3C%2Fsvg%3E");
}

.code-container > .code-language {
    position: absolute;
    top: 0;
    right: 1.8em;
    font-size: 1em;
    color: #999;
    cursor: default;
}

/* 注释 */
.token.comment {
    font-style: italic;
    color: var(--code-comment-color);
}

/* Prolog 代码 */
.token.prolog {
    font-style: italic;
    color: var(--code-prolog-color);
}

/* DOCTYPE */
.token.doctype {
    font-style: italic;
    color: var(--code-doctype-color);
}

/* CDATA */
.token.cdata {
    font-style: italic;
    color: var(--code-cdata-color);
}

/* 操作符 */
.token.operator {
    color: var(--code-operator-color);
}

/* 标点符号 */
.token.punctuation,
.token.interpolation-punctuation {
    color: var(--code-punctuation-color);
}

/* 命名空间 */
.token.namespace {
    color: var(--code-namespace-color);
}

/* CSS 属性 */
.token.property {
    color: var(--code-property-color);
}

/* 标签 */
.token.tag {
    color: var(--code-tag-color);
}

/* 布尔类型 */
.token.boolean {
    color: var(--code-boolean-color);
}

/* 数字 */
.token.number {
    color: var(--code-number-color);
}

/* 常量 */
.token.constant {
    color: var(--code-constant-color);
}

/* 符号 */
.token.symbol {
    color: var(--code-symbol-color);
}

/* 被删除的代码 */
.token.deleted {
    color: var(--code-deleted-color);
}

/* CSS 选择器 */
.token.selector {
    color: var(--code-selector-color);
}

/* 字符串 */
.token.string {
    color: var(--code-string-color);
}

/* 字符 */
.token.char {
    color: var(--code-char-color);
}

/* 内建函数 */
.token.builtin {
    color: var(--code-builtin-color);
}

/* URL */
.token.url {
    color: var(--code-url-color);
}

/* 插入的代码 */
.token.inserted {
    color: var(--code-inserted-color);
}

/* CSS at-rule */
.token.atrule {
    color: var(--code-atrule-color);
}

/* HTML 属性名 */
.token.attr-name {
    color: var(--code-attrname-color);
}

/* HTML 属性值 */
.token.attr-value {
    color: var(--code-attrvalue-color);
}

/* 关键字 */
.token.keyword {
    color: var(--code-keyword-color);
}

/* 正则表达式 */
.token.regex {
    color: var(--code-regex-color);
}

/* 函数 */
.token.function {
    color: var(--code-function-color);
}

/* CSS 类名 */
.token.class-name {
    color: var(--code-classname-color);
}

/* !important 关键字 */
.token.important {
    color: var(--code-important-color);
}

/* 加粗 */
.token.bold {
    font-weight: 600;
}

/* 斜体 */
.token.italic {
    font-style: italic;
}